@font-face {
  font-family: 'eurosteal';
  src:url('/Website Fonts/Eurosteal.woff')
  format('woff');
  }
@font-face {
 font-family: 'Montserrat-Light';
 src:url('/Website Fonts/Montserrat-Light.woff')
 format('woff');
 }

@font-face {
  font-family: 'Montserrat-Medium';
  src:url('/Website Fonts/Montserrat-Medium.woff')
  format('woff');
}
:root {
--font-size-primary: 1.6em ;
--font-size-secondary: 3vw;
--font-size-navigation: 1.2em;
--font-size-text: 0.9em;
--font-size-footer: 0.8em;
--font-primary: 'eurosteal','Arial', sans-serif;;
--font-secondary: 'Montserrat-Light','Arial', sans-serif;
--font-color: black;
--font-effect-filter:  blur(2px);
--letter-spacing-secondary: 1.2em;
--letter-spacing-text: 1px;
--letter-spacing-footer: 3px;
--line-height-text: 1.5;
--background-color: rgba(232, 232, 232, 0.519);
--hover-effect:  blur(2px);
--hover-effect-transition: filter 0.5s ease;
--backdrop-filter: blur(5px);
--gradient-mask: linear-gradient(to bottom, 
rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 80%, 
rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
) 100% 50% / 100% 100% repeat-x;
--border-radius: 3px;
--border: 1px solid #000000;

}


html {
scroll-behavior: smooth;
}
#About {
scroll-margin-top: 120px; 
}
#Portfolio {
scroll-margin-top: 120px; 
}

body{
margin: 0%;
}
ul{
list-style-type: none;
}

.list-box {
display: flex;
flex-direction: row; 
justify-content: space-between; 
padding: 15px;
background-color: var(--background-color);
margin-top: 15px;
margin-bottom: 0px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
@media (max-width: 700px){ 
.list-box {
flex-direction: column;
align-items: flex-start;
margin-top: 0;
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
margin-bottom: -168px;
}}
  
.nav-box {
position: sticky;
top: 0;
z-index: 1;
}

.menu-item {
margin-left:3%;
margin-right: 3%;
list-style-type: none;
}
@media (max-width: 700px){ 
.menu-item {
margin-bottom: 15px;
}}
    
.h1-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-left: 3%;
margin-top: 15px;
padding: 0;
}
@media (max-width: 700px){ 
.h1-box{
justify-content: center;
margin-bottom: 15px;
}}
  
h1 { 
font-size: var(--font-size-primary);
font-family: var(--font-primary);
}
 
#Logo {
width: 75px;
transition: var(--hover-effect-transition);
}
#Logo:hover {
  filter: var(--hover-effect);
}

.navtext {
font-family: var(--font-primary);
font-size: var(--font-size-navigation); 
color: var(--font-color);
text-decoration: none;
transition: var(--hover-effect-transition);
}
.navtext:hover {
filter: blur(2px); 
}

.disclosure-box {
display: flex;
flex-direction: row;
align-items: top;
justify-content: flex-start;
gap: 4%;
margin: 10% 4% -10% 4%;
}
  
.paragraphs {
font-family: var(--font-secondary);
font-size: var(--font-size-text);
letter-spacing: var(--letter-spacing-text);
}

.footer-box {
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content:space-between;
  margin-top: 2%;
  backdrop-filter: var(--backdrop-filter);
  -webkit-backdrop-filter: var(--backdrop-filter);
  background-color: var(--background-color);
  border-top: var(--border);
}
@media (max-width: 700px){ 
  .footer-box {
  flex-direction: column;
  align-items: center;
  }}

  .footer-text-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 5%;
  gap: 15%;
  }
  @media (max-width: 700px){ 
  .footer-text-box{
  flex-direction: column;
  margin: 3% 0% 0% 0%;
  }}

.footer-text {
  font-size: var(--font-size-footer);
  font-family:  'Montserrat-Medium','Arial', sans-serif;
  letter-spacing: var(--letter-spacing-footer); 
  color: var(--font-color);
  text-decoration: none;
  transition: var(--hover-effect-transition);
  white-space: nowrap;
}
@media (max-width: 700px){ 
  .footer-text{
  margin-top: 3%;
  font-size: 0.8em;
  padding: 0;
  }}
.footer-text:hover {
  filter: var(--hover-effect);
}
#Copyright {
  font-size: var(--font-size-footer);
  font-family:  var(--font-secondary);
  letter-spacing: var(--letter-spacing-footer); 
  color: var(--font-color);
  white-space: nowrap;
  margin-right: 5%;
}
@media (max-width: 700px){ 
  #Copyright{
  font-size: 0.6em;
  margin: 3% 0 3% 0;
  }}

.contact-box {
  display: flex;
  flex-direction: column; 
  align-items: flex-end;
  position: sticky;
  bottom: 10%;
  background-color: var(--background-color);
  backdrop-filter: var(--backdrop-filter);
  -webkit-backdrop-filter: var(--backdrop-filter);
  gap: 80px;
  padding: 15px 10px 15px 10px;
  border-radius: 5px 0px 0px 5px;
  width: 30px;
  margin-left: auto;
  margin-top: -7%;
  z-index: 1;
  background-color: var(--background-color);
}
@media (max-width: 700px){ 
.contact-box {
margin-top: -30%;
}}

.contact-icon {
  height: 28px;
  transition: var(--hover-effect-transition);
}
.contact-icon:hover {
  filter: var(--hover-effect);
}
label {
  cursor: pointer;
  display: none;
  padding: 0;
  transition: var(--hover-effect-transition);
  }
  @media (max-width: 700px){ 
  label{
  display: block;
  }}
  label img {
  height: 22px;
  width: auto;
  }
  label:hover {
  filter: var(--hover-effect);
  }
  
  input[type="checkbox"]:checked + div label .hamburger {
  display: none;
  }
  .cross {
  display: none;
  }
  input[type="checkbox"]:checked + div label .cross {
  display: block;
  }
  
  input[type="checkbox"] {
  display: none;
  }
  
  @media (max-width: 700px){ 
  input[type="checkbox"]:checked ~ .list-box  {
  display: block;
  opacity: 1; }}
  
  .check-box {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  padding: 15px;
  backdrop-filter: var(--backdrop-filter);
  -webkit-backdrop-filter: var(--backdrop-filter);
  background-color: var(--background-color);
  display: none;
  }
  @media (max-width: 700px){ 
  .check-box{
  display: block;
  }}